<template>
  <div>
    <div class="content">
      <My-Title :title="Title"></My-Title>

      <div class="m-card-box">

        <div class="m-card">
          <div class="name">{{ '燃料类型' }}</div>
          <div class="value">{{ info.fuelType }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '发动机企业' }}</div>
          <div class="value">{{ info.engineCompany }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '发动机型号' }}</div>
          <div class="value">{{ info.engineModel }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '发动机编号' }}</div>
          <div class="value">{{ info.engineNo }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '排放量' }}</div>
          <div class="value">{{ info.outputVolume }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '额定功率' }}</div>
          <div class="value">{{ info.powerRate }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '最大马力' }}</div>
          <div class="value">{{ info.horsepower }}</div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import MyTitle from '@/components/MyModal/title'
import { getCarBaseInfo } from "@/api/largescreen"
// let

export default {
  name: "CarBase",
  components: {
    MyTitle
  },
  data() {
    return {
      Title: '发动机信息'
    }
  },
  props: {
    info: {
      type: Object,
      default: {}
    }
  },
  methods: {

  }
}

</script>

<style scoped lang="scss">

.content {
  position: absolute;
  left: 100px;
  top: 0;
  padding: 25px 20px 20px 40px;
  width: calc(100% - 100px);

  .m-card-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: center;
    height: 705px;
    overflow-x: hidden;
    overflow-y: scroll;

    .m-card {
      width: 246px;
      height: 80px;
      margin-top: 20px;
      background: #050e2399;
      border: 1px solid;
      border-image: linear-gradient(90deg,
        #00000000 0%,
        #00fff411 25%,
        #00fff455 50%,
        #00fff411 75%,
        #00000000 100%) 1;
      text-align: center;

      .name {
        font-size: 21px;
        color: #07c8d1;
        height: 40px;
        line-height: 50px;
        white-space: nowrap;
      }

      .value {
        font-size: 21px;
        color: #f6f6f6;
        height: 40px;
        line-height: 30px;
        white-space: nowrap;
      }
    }
  }
}
</style>
